<template>
  <div class="awaitcheck-box">
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="快去发布房源吧~"
      slot="houseItem"
      v-if="houseList.length == 0"
    />
    <house-item
      v-for="item of houseList"
      :key="item.id"
      :houseItem="item"
      :imgPath="staticpath+item.images[0].path"
      v-else
    >
      <span
        slot="state"
        class="stateSpan"
        :class="{green:item.isCheck == 1,yellow:item.isCheck == 2,red:item.isCheck == 3}"
      >{{item.isCheck | CheckState}}</span>
      <span slot="publicTime" class="publicTime-box">{{item.publishTime.substr(0,10)}}</span>
      <span slot="ishot" class="ishotSpan" v-if="item.isHot == 1">{{item.isHot | isHotState}}</span>
    </house-item>
  </div>
</template>

<script>
import { queryHouseState } from "network/rentstate";

import HouseItem from "components/common/houseitem/HouseItem";

export default {
  name: "",
  components: {
    HouseItem,
  },
  data() {
    return {
      houseList: [], 
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  activated() {
    let userId = localStorage.getItem("userId");
    let code = 4;
    queryHouseState({ userId, code }).then((res) => {
      console.log(res);
      this.houseList = res.data;
    });
  },
  filters: {
    CheckState(val) {
      return val == "1" ? "审核通过" : val == "2" ? "未审核" : "审核未通过";
    },
    isHotState(val) {
      return val == 1 ? "热门" : "";
    },
  },
};
</script>

<style scoped>
.awaitcheck-box {
  padding-bottom: 50px;
  /* height: 100%; */
}
.stateSpan {
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
}
.ishotSpan {
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
  background-color: red;
}
.green {
  background-color: green;
}
.yellow {
  background-color: rgb(236, 236, 58);
}
.red {
  background-color: red;
}
.publicTime-box {
  font-size: 12px;
  color: #666;
}
</style>